import React, { useEffect } from 'react';

import BoardDesign from '@/pages/Analysis/Board/BoardDesign';
import { IDashboardItem } from '@/pages/SelfQuery/type';
import { connect, Dispatch, history } from 'umi';
import { ConnectState } from '@/models/connect';

interface IProps {
  dispatch: Dispatch;
  board: IDashboardItem;
  submitting?: boolean;
  match: { params: { boardId: string, projectId: string, portalId: string } }
}

const Design: React.FC<IProps> = (props: IProps) => {
  const { match, dispatch, board } = props;
  const { projectId, boardId, portalId } = match.params;
  useEffect(() => {
    return () => {
      dispatch({
        type: 'board/clearBoard',
      });
    };
  }, []);
  const initBoard = () => {
    dispatch({
      type: 'board/fetchDashboard',
      payload: {
        portalId,
        dashboardId: boardId,
      },
    });
  };
  useEffect(() => {
    initBoard();
    dispatch({
      type: 'sheet/fetchSheetListByProjectId',
      payload:projectId
    });
  }, []);
  if (!board) {
    return null;
  }
  return (
    <BoardDesign projectId={Number(projectId)} board={board} initBoard={initBoard} onCanel={() => {
      history.go(-1);
    }} />
  );
};


export default connect(({ board, user }: ConnectState) => ({
  board: board.dashboard,
}))(Design);

